<script>
import { usePageStore } from '@/admin/store/modele/page';
import { getDic } from '@/admin/utils/index';
import main from './mixins/main';
import tab from './mixins/tab';
import table from './mixins/table';
import filter from './mixins/filter';
import banner from './mixins/banner';
export default {
  name: 'Tem1120',
  mixins: [main, tab, filter, table, banner],
  data() {
    return {
      pageStore: null
    };
  },
  mounted() {
    // 初始化store
    this.pageStore = usePageStore();

    // 从码表中获取数据
    if (this.treeInfo.codeDataSource) {
      this.tabData = getDic(this.treeInfo.codeDataSource).map(i => {
        i.TREE_UNION_NAME = i.name;
        return i;
      });
      console.log(this.tabData);
      this.pageStore.setTrees(this.tabData);
      // 获取第一个tab
      const keyField = this.keyField || 'code';
      if (this.tabInfo.defaultSelect) {
        this.currentTab = this.tabData.find(i => i[keyField] == this.tabInfo.defaultSelect);
        this.activeTab = `tab_${this.currentTab[keyField]}`;
        this.pageStore.setCurrentTree(this.currentTab);
      } else if (this.tabData.length) {
        this.currentTab = this.tabData[0];
        this.activeTab = `tab_${this.currentTab[keyField]}`;
        this.pageStore.setCurrentTree(this.currentTab);
      }
      this.getList();
    } else {
      this.gettabData().finally(() => {
        this.getList();
      });
    }
  },
  methods: {
    onActivated() {
      this.pageStore.setCurrentTree(this.currentTab);
      this.getList();
    },
    handleTabClick(data, node) {
      console.log(data);
      this.currentPage = 1;
      this.pageStore.setCurrentTree(data);
      this.emitTabclick({ data, node });
      this.currentTab = data;
      this.getList();
    }
  }
};
</script>

<template>
  <div>
    <PageBanner v-if="showBanner && bannerPosition === 'top'" ref="pageBanner" :banner-setting="bannerSetting" />
    <div>
      <TableFilter
        ref="tableFilter"
        v-model:search-type="searchType"
        v-model:search-text="searchText"
        is-in-template
        :query="filter"
        :query-rows="queryRows"
        :enable-full-search="fullTextSearch"
        :grid-info="gridInfo"
        @search="handleSearch"
        @reset="handleSearch"
      />
      <div class="filter-wraper">
        <TableOperate is-in-template :btns="toolbarBtns" :show-back="showBack">
          <template v-if="showBack" #back="{ size }">
            <span class="btn-wraper">
              <ElButton type="primary" :size="size" @click="goBack">
                <ElIcon><Back /></ElIcon>
                返回
              </ElButton>
            </span>
          </template>
        </TableOperate>
      </div>

      <div class="left-container">
        <CustomTab
          v-model:active-tab="activeTab"
          :data="tabData"
          :tab-info="tabInfo"
          :total="tabTotal"
          :totals="tabTotals"
          @node-click="handleTabClick"
        />
      </div>
      <LbTable
        ref="lbTable"
        v-loading="listLoading"
        v-bind="tableAttr"
        :column="tableColumn"
        :data="tableData"
        :table-info="tableInfo"
        :grid-info="gridInfo"
        v-model:current-page="currentPage"
        :personalization="personalization"
        :btns="tableBtns"
        :pagination="enablePaging"
        background
        border
        is-template
        fixed-heigth
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="pageSizes"
        :total="total"
        :page-size="pageSize"
        :default-sort="defaultSort"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
        @sort-change="handleSortChange"
      />

      <PageBanner v-if="showBanner && bannerPosition === 'bottom'" ref="pageBanner" :banner-setting="bannerSetting" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep .form-operate {
  display: inline-block;
  margin-right: 10px;
}
::v-deep .el-tabs__item {
  font-size: 16px;
}
</style>
